<template>
  <div>
    <Header></Header>

    <div class="container layout layout-margin-top">

      <ol class="breadcrumb">
        <li><a href="/paths/">学习路径</a></li>
        <li class="active"><a href="">{{path.title}}</a></li>
      </ol>

      <div class="row">
        <div class="col-md-9 layout-body">

          <div class="content" style="padding:0px">
            <div class="path-description" style="margin:0px">
              <div class="path-desc-top clearfix"
                   style="background: url('/static/img/1471513740139.png') no-repeat;background-size: cover;">
                <div class="name-total-box clearfix">
                  <div class="col-md-6 col-sm-6 col-md-offset-1 path-name">
                    <h4>{{path.title}}</h4>
                  </div>
                  <div class="col-md-3 col-sm-6 col-md-offset-1 path-total-courses">
                    <span class="total-courses-box">课程 <span class="num">{{path.count_course}}</span></span>
                  </div>
                </div>
                <div class="col-md-10 col-md-offset-1 path-desc-text">{{path.desc}}
                </div>
              </div>
              <div class="path-desc-btm">
                <div class="col-sm-12 col-md-4 clearfix learn-time-div">
                  <div class="col-md-12 text-left need-learn-time">预计需要 <span class="num">{{path.count_length}}</span>
                    小时学习
                  </div>
                </div>
                <div class="col-sm-12 col-md-8  clearfix text-right" style="padding-top:0px">
                  <div class="col-xs-12">

                    <a class="btn btn-path-operation btn-join-path"
                       @click="join_path">
                      <span v-if="is_join">取消加入</span>
                      <span v-else>加入路径</span>
                    </a>

                    <p style="font-size:10px;margin-top:5px">加入获得路径课程更新提醒</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="content">
            <ul class="nav nav-tabs" role="tablist">
              <li role="presentation" class="active">
                <a href="#path-details" aria-controls="path-details" role="tab" data-toggle="tab">路径详情</a>
              </li>
              <li role="presentation">
                <a href="#path-comments" aria-controls="path-comments" role="tab" data-stat="path_comments"
                   data-toggle="tab">路径评论(<span class="comments-count">0</span>)</a>
              </li>
            </ul>
            <div class="tab-content">
              <div role="tabpanel" class="tab-pane path-details active" id="path-details">
                <div class="details-box">
                  <a href="" class="btn start-btn">开始学习</a>
                  <div v-for="stage in path.stage_set" :key="stage.id">
                    <div class="clearfix text-center path-title-box">
                      <span class="line hidden-xs"></span>
                      <span>{{stage.title}}</span>
                      <span class="line hidden-xs"></span>
                    </div>
                    <div class="row">
                      <div v-for="course in stage.courses" :key="course.id" class="col-md-4 col-sm-6  course">
                        <a class="course-box" :href="'/courses/detail/?cid='+course.id">
                          <div class="sign-box">
                            <i class="fa fa-star-o course-follow pull-right" style="display:none"></i>
                          </div>
                          <div class="course-img">
                            <img :alt="course.title" :src="course.img">
                          </div>

                          <div class="course-body">
                            <span class="course-title" data-toggle="tooltip" data-placement="bottom"
                                  :title="course.title">{{course.title}}</span>
                          </div>
                          <div class="course-footer">
                            <span class="course-per-num pull-left">
                              <i class="fa fa-users"></i>
                              {{course.study_num}}
                            </span>
                            <span v-show="course.fee==3" class="course-money pull-right">会员</span>
                          </div>
                        </a>
                      </div>

                    </div>
                  </div>


                  <div class="btn end-pin">完成学习</div>
                </div>
              </div>
              <div role="tabpanel" class="tab-pane path-comment" id="path-comments">
                <div class="comment-box">
                  <div class="comment-form">

                    <div class="comment-form-unlogin">
                      请
                      <a href="#sign-modal" data-toggle="modal" data-sign="signin"> 登录 </a>
                      后发表评论
                    </div>

                  </div>
                  <div class="comment-title">最新评论</div>
                  <div class="comment-list"></div>
                  <div class="pagination-container"></div>
                </div>
              </div>
            </div>
          </div>

        </div>
        <div class="col-md-3 layout-side">


          <div class="panel panel-default panel-userinfo">
            <div class="panel-body body-userinfo">
              <div class="media userinfo-header">
                <div class="media-left">
                  <div class="user-avatar">

                    <a class="avatar" href="#sign-modal" data-toggle="modal" data-sign="signin">
                      <img class="circle" src="/static/img/logo-grey.png">
                    </a>

                  </div>
                </div>
                <div class="media-body">

                  <span class="media-heading username">欢迎来到实验楼</span>
                  <p class="vip-remain">做实验，学编程</p>

                </div>
              </div>

              <div class="row userinfo-data">

                <hr>
                <div class="btn-group-lr">
                  <a href="#sign-modal" type="button" class="btn btn-success col-md-5 col-xs-6 login-btn"
                     data-toggle="modal" data-sign="signin">登录</a>
                  <a href="#sign-modal" type="button"
                     class="btn btn-success col-md-5 col-xs-6 col-md-offset-1 register-btn" data-toggle="modal"
                     data-sign="signup">注册</a>
                </div>

              </div>

              <div class="userinfo-footer row">
                <div class="col-md-6 col-xs-6 pos-left">

                  <a href="#sign-modal" data-toggle="modal" data-sign="signin"><span
                    class="glyphicon glyphicon-bookmark"></span> 加入私有课</a>

                </div>
                <div class="col-md-6 col-xs-6 pos-right">
                  <a href="/contribute" target="_blank"><span class="glyphicon glyphicon-send"></span> 我要投稿</a>
                </div>

                <div id="join-private-course" class="modal fade words-ctrl" tabindex="-1" role="dialog">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h4 class="modal-title">加入私有课</h4>
                      </div>
                      <div class="modal-body">
                        <div style="margin:15px 0; font-size: 16px;">输入教师提供的私有课程码可以加入教师的私有课程。</div>
                        <form id="private-course-form" method="POST" action="/courses/join">
                          <div class="form-group">
                            <label for="code">邀请码</label>
                            <input class="form-control" id="code" name="code" type="text" value="">
                            <input name="_csrf_token" type=hidden
                                   value="1483796689##5dfe74a8992e829e903291b65bbbdabafa60f4e1">
                          </div>
                        </form>

                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary"
                                onclick="document.getElementById('private-course-form').submit();">确定
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>


          <div class="sidebox">

            <div class="sidebox-header">
              <h4 class="sidebox-title">最热路径</h4>
            </div>
            <div class="sidebox-body course-content side-list-body">
              <a href="/paths/python"><img style="width:25px;height:25px" src="/static/img/1471513769430.png"> Python
                研发工程师</a>
              <a href="/paths/bigdata"><img style="width:25px;height:25px" src="/static/img/1471513926288.png">
                大数据工程师</a>
              <a href="/paths/cpp"><img style="width:25px;height:25px" src="/static/img/1471513793360.png"> C++
                研发工程师</a>
              <a href="/paths/security"><img style="width:25px;height:25px" src="/static/img/1471513867033.png"> 信息安全工程师</a>
              <a href="/paths/linuxsys"><img style="width:25px;height:25px" src="/static/img/1471514004752.png"> Linux
                运维工程师</a>
            </div>

          </div>

          <div class="side-image side-qrcode">
            <img src="/static/img/ShiyanlouQRCode.png">
            <div class="side-image-text">关注公众号，手机看教程</div>
          </div>

        </div>
      </div>
    </div>

    <Footer></Footer>
  </div>
</template>

<script>
  import Header from '@/components/Header'
  import Footer from '@/components/Footer'

  export default {
    name: "Detail",
    components: {Header, Footer},
    data() {
      return {
        pid: '',  // 接收到路径参数, 路径id
        is_join: false, // 是否加入路径
        path: {
          "id": 1,
          "title": "新手入门",
          "desc": "新手入门路径帮助对 IT 技术感兴趣的新手0基础入门计算机编程。本路径通过新手入门、Linux 及 Vim课程熟悉实验楼的实践学习环境，再以 C 语言和一个简单的项目引导你一步步进入计算机技术的殿堂。",
          "img": "http://127.0.0.1:8000/media/paths/1.png",
          "count_course": 4,
          "count_length": 4.25,
          "stage_set": [
            {
              "id": 1,
              "title": "阶段1：基础知识",
              "sequence": 1,
              "courses": [
                {
                  "id": 2,
                  "fee": 2,
                  "status": 1,
                  "pub_time": "2020-12-01T03:23:49Z",
                  "study_num": 202,
                  "img": "http://127.0.0.1:8000/media/course/ncn1.jpg",
                  "title": "Linux入门",
                  "desc": "要在实验楼愉快地学习，先要熟练地使用 Linux，本实验介绍 Linux 基本操作，shell 环境下的常用命令。",
                  "attention_num": 2,
                  "tag": 3,
                  "teacher": 1
                }
              ]
            },
          ]
        }  // 路径数据
      }
    },
    created() {
      this.pid = this.$route.query.pid
      this.get_paths()
      this.is_join_path()
    },
    methods: {
      get_paths() {
        this.axios.get('/paths/' + this.pid + '/').then(res => {
          this.path = res.data
        })
      },
      join_path(){
        this.axios.post('/join_path/',{pid:this.pid}).then(res=>{
          if(res.data.code=='0'){
            alert(res.data.msg)
            this.is_join = !this.is_join
          }else{
            alert(res.data.msg)
          }
        })
      },
      is_join_path(){
        this.axios.get('/join_path/?pid='+this.pid).then(res=>{
          if(res.data.count>0){
            this.is_join = true
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
